import React from "react"

import { SearchBar, Button, WhiteSpace, WingBlank,Icon } from 'antd-mobile';

import {Link} from "react-router-dom";


import {getHotSearch} from "../../api/index";

//搜索匹配接口

import {search} from "../../api/index"

import{withRouter} from "react-router-dom"

class SearchBarExample extends React.Component {
  constructor(){
    super();
    this.state={
      show:false,
      hotList:[],
      search:[],
      value:""
    }
    this.myRef = React.createRef()
  }
 
    // s
    onchange= (e) => {
      // console.log(this.state.value)
      this.setState({
        value:e.target.value,
        show:true
      })
      
      if(this.state.value != ""){
         search(this.state.value).then(res=>{
          // console.log(res.data)
             this.setState({
               search:res.data.result.songs.slice(0,10)
             })
       })
      }
    };
  componentDidMount(){
    //自动聚焦
    this.myRef.current.focus()

    getHotSearch().then(res=>{
           
      this.setState({
          hotList:res.data.result.hots
      })
    })

    
  }
  componentDidUpdate(){
     if(this.state.value == ""){
          this.state.show =false 
     }
  }

  // clear = () => {
  //   this.setState({ value: '',show:false });
  // };
  // handleClick = () => {
  //   this.manualFocusInst.focus();
  // }
   
  //回退
  goBack(){
    //   console.log(this.props)
      this.props.history.go(-1)
  }
  // clickSearch(){
  //   console.log(123)
  //   this.props.history.push({pathname:"/searchBroadCast",state:{}})
  // }
  render() {
    // console.log(this.state.show)
    let {hotList,search} = this.state;
    // console.log(search)
    return (
    
     
     <div className="Inner">
         <div className="SeachHeader">
             <div className="searchLeft"></div>
             <div className="searchMain">
             <Icon type="search" />
             <input type="text" value={this.state.value} onChange={this.onchange.bind(this)} ref={this.myRef}/>
             </div>
             <div className="searchRight" onClick={this.goBack.bind(this)}><span>取消</span></div>
         </div>
         <div className={this.state.show?"searching show":"searching"}>
               <li><span>搜索</span><i>“</i><i>{this.state.value}</i><i>”</i></li>
              {search.map((item,index) => {
                  return(
                    <Link to={{pathname:"/searchBroadCast",state:{item}}} key={item.id}> <li ><Icon type="search"/><u>{item.name}</u></li></Link>
                  )
              })}
         </div>
          
         <div className={this.state.show?"hotSearch unshow":"hotSearch"}>
                      <h2>热门搜索</h2>
                      <div className="hotInner">
                       {hotList.map((item,index)=>{
                        //  console.log(item)
                           return (
                               <Link to="/dasa" key={index}>
                                  {item.first}
                               </Link>
                           )
                       })}
                     
                      </div>
         </div>
     </div>
   );
  }
}


export default withRouter(SearchBarExample)